<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>姓名：</th>
                    <th>性别：</th>
                    <th>年龄：</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in persons" key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                </tr>
                <tr  v-for="item in arr">
                    <td>{{item}}</td>
                </tr>
            </tbody>
        </table>
        <template v-for="i in 3">
            <p>我是p标签</p>
            <div>我是div元素</div>
        </template>
        
    </div>
       
    <script src="./base/vue.min.js"></script>
    <script>

        //在body里写的都是假的！！！！
        //如果要进行多标签的循环，(不想额外形成新的标签 )外面套上template

        var vm = new Vue({
            el:"#app",
            data:{
                persons:[
                    {id:1,name:"张三",sex:"男",age:10},
                    {id:2,name:"李四",sex:"女",age:20}
                ],
                arr:["1","2","3"]
            }
        })

        /* 
        触发视图的更新操作 ==> 属于数组的变异方法
        push()
        pop()
        shift()
        unshift()
        splice()
        sort()
        reverse() */
        //vm.persons.push({id:3,name:"王五",sex:"男",age:30})




        // 由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
        // 当你利用索引直接设置一个数组项时，例如：vm.arr[indexOfItem] = newValue
        // 当你修改数组的长度时，例如：vm.arr.length = newLength
        //vm.persons[0].name="王五"
        //vm.arr[0] = 100
       

        // vm.arr.length = 1; 
        // vm.arr.splice(1)
    </script>
</body>
</html>